<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <!--Import Google Icon Font-->
    <!--<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1">-->
    <title>易游-登录</title>

  
    <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
    <style type="text/css">       
        body {
            background: #ddffcc;
        }
        
        .panel {
            margin: auto;
            margin-top: 100px;
            padding: 10%;
            padding-top: 2%;
            width: 520px;
            height: 540px;
            background-color: #fff;
            border-radius: 20px;
            box-shadow: 0px 0px 20px #60aa70;
        }
        
        #logo {
            margin-top: 30px;
            margin-bottom: 50px;
            text-align: center
        }
        
        #submit {
            width: 100px;
            margin: auto;
            margin-top: 70px;
        }

        #hint {
            color: #ff9922;
            margin-bottom: -20px;
            margin-top: 0px;
            height: 8px;
        }


    </style>

</head>
<script>
    $(document).ready
    (
        function() 
    {
        $("#submit").click
        (
            function() 
        {                      //jQuery中的id选择器
            var name = $("#username").val();
            var pwd = $("#password").val();
            var chk = $("#check").val();
            //alert(name + "," + pwd);
            //if (!checkInput("密码" , pwd) || !checkInput("姓名" , name)) {
            //    return
            //}
            
            var settings = {
                type: "POST",
                url: "http://192.168.21.14:8000/admin/login",
                dataType: "json",
                data: {
                    module: "admin",
                    action: "login",
                    username: name,
                    password: pwd,
                    code: chk
                },
                
                error: function(XHR, textStatus, errorThrown) {
                    alert("网络错误");
                },
                
                success: function(data) {
                 
                    document.getElementById("hint").innerHTML=data.message;
                    $("#username").val("");
                    $("#password").val("");
                    $("#check").val("");
                      window.location.href = "./main2.html";
                },
            };
            $.ajax(settings);
        }
        );
        
        $("#code").click(
            function ()
            {
                var verify=document.getElementById("img");
                console.log(verify);
                verify.setAttribute("src","http://192.168.21.14:8000/admin/check_code?"+Math.random());
            }
            );
    
    });



</script>

<body class="light-green lighten-4">
    <div class="container ">
        <div class="panel ">
            <h4 id="logo">易游<small>-武侯祠</small></h4>
            <form>
                <input type="hidden" name="module" value="admin">
                <input type="hidden" name="action" value="login">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" class="form-control" id="username" name="username" placeholder="用户名">
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                </div>
                <table>
                <tr>
                    
                    <td class="form-group"><label for="check">验证码</label>
                    <input type="text" class="form-control" id="check" name="check" placeholder="验证码"></td>

                    <td id="code"><img id="img"
                         src="http://192.168.21.14:8000/admin/check_code"   title="点此获取验证码"></img><br> 
                    <a  tabindex="4" href="javascript:void(0);" class="verifyimg_tips">  点此获取验证码</a></td>
                </tr> 

                </table>
                <div>
                    <p id="hint"></p>
                </div>

                <button type="button" class="btn btn-primary btn-block light-green" id="submit">提交</button>
            </form>

        </div>
    </div>

</body>

</html>

